import type { Query } from '@/interface/Query'
import type { Dept } from "@/interface/Dept"
import {onMounted, ref} from "vue";
import { oneIdApi , listApi , operatorApi , treeNodeApi , deleteApi } from "@/controller/DeptApi";
import type {Rule} from "ant-design-vue/es/form";
import { message } from "ant-design-vue";

export default function () {


    let queryModel = ref({
        page: 1,
        size: 15
    } as Query);

    let searchBox = ref(true);

    onMounted(()=> {
        list();
    });

    function resetQuery() {
        queryModel.value = {
            page : 1,
            size : 15
        } as Query;
        list();
    }

    let total = ref(0);

    let columns = [
        {
            title: '名称',
            dataIndex: 'name',
            fixed: 'left',
            align: 'center',
            width: 120
        },
        {
            title: '负责人',
            dataIndex: 'leader',
            align: 'center',
            resizable: true,
            width: 120

        },
        {
            title: '联系电话',
            dataIndex: 'phone',
            align: 'center',
            resizable: true,
            width: 130
        },
        {
            title: '邮箱',
            dataIndex: 'email',
            align: 'center',
            resizable: true,
            width: 140
        },
        {
            title: '排序',
            dataIndex: 'sortOrder',
            align: 'center',
            sorter: (a : Dept, b : Dept) => a.sortOrder - b.sortOrder,
            resizable: true,
            width: 80
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            align: 'center',
            resizable: true,
            width: 160
        },
        {
            title: '更新时间',
            dataIndex: 'updateTime',
            align: 'center',
            resizable: true,
            width: 160
        },
        {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 220
        }
    ]

    let tableData = ref([] as Dept[]);

    let treeDept = ref([] as Dept[]);

    function getTreeDept() {
        treeNodeApi().then(res => {
            if (res.code == 200) {
                treeDept.value = res.data;
            }
        })
    }

    function deleteDept(id : string) {
       deleteApi(id).then(res =>{
           if (res.code == 200) {
               message.success("删除成功");
               list();
           }else {
               message.error(res.msg);
           }
       });
    }

    function list() {
        listApi(queryModel.value).then(res => {
            if(res.code == 200) {
                tableData.value = res.data.records;
                total.value = parseInt(res.data.totalRow);
            }
        })
    }


    function pageChange(page : number , size : number) {
        queryModel.value.page = page;
        queryModel.value.size = size;
        list();
    }

    let operatorStore = ref({
        cmd: 0,
        open: false
    });
    let dept = ref({} as Dept);
    function operator(cmd : number,id?: string | null,pId?: string) {
        getTreeDept();
        operatorStore.value.cmd = cmd;
        operatorStore.value.open = true;
        if(id) {
            oneIdApi(id).then(res => {
                if(res.code == 200) {
                    dept.value = res.data;
                }
            })
        }
        if(pId) {
            dept.value.pId = pId;
        }
    }

    let formRef = ref();
    function submitOperator() {
        formRef.value
            .validate()
            .then(() => {
                operatorApi(dept.value).then(res => {
                    if(res.code == 200) {
                        message.success( operatorStore.value.cmd == 0 ? '新增部门成功!' : '编辑部门成功');
                        resetFrom();
                        list();
                    }else {
                        message.error(res.msg);
                    }
                });
            })
            .catch(( e: any ) => {

            });
    }

    function resetFrom() {
        dept.value = {} as Dept;
        operatorStore.value = {
            cmd: 0,
            open: false
        };
    }

    let rules : Record<string, Rule[]> = {
        name: [
            { required: true, message: '请输入菜单名称', trigger: 'blur' },
        ],
        sortOrder: [
            { required: true, message: '请输入排序', trigger: 'blur' },
        ],
        leader: [
            { required: true, message: '请输入负责人', trigger: 'blur' },
        ],
        phone: [
            { required: true, message: '请输入联系电话', trigger: 'blur' },
        ],
        email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
        ]
    }

    function handleResizeColumn(w : any, col : any) {
        col.width = w;
    }

    return {
        queryModel , searchBox , resetQuery , total , columns ,
        tableData , pageChange , operator , operatorStore , resetFrom ,
        submitOperator , dept , rules , formRef , list , treeDept ,
        deleteDept , handleResizeColumn , getTreeDept
    }
}
